30天用React打造AI工具箱 Day1

序章：我想做的事情

我想把AI能力做成真的能用的前端工具，而不是只看模型示範。為了讓新手也能跟上，我選擇React（JavaScript）＋Tailwind，用最小可行的方式，一天一小步，把功能慢慢長出來。

至於這個系列會怎麼寫呢？我會採取「先說清楚為什麼，再動手」的形式，且程式碼只放必要片段。

主要會用到React、Tailwind、JavaScript來實作一系列的功能。

那今天我們先把專案生出來並且測試可不可以執行，建立這些檔案與把程式碼貼上即可。

建立 Vite + React 專案

npm create vite@latest ai-toolbox -- --template react
cd ai-toolbox
npm i

安裝 Tailwind v4 與 Vite 插件

npm install tailwindcss @tailwindcss/vite

安裝完成後在src找到這三個檔案App.jsx,main.jsx,index.css(沒有就建立一個)，並且把這些程式碼放上去

App.jsx

import { useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 p-10">
      <main className="max-w-3xl mx-auto">
        <h1 className="text-3xl font-bold mb-4">AI 工具箱（React + Tailwind v4 + JS）</h1>
        <p className="mb-6 leading-relaxed">Day1：確認 Tailwind 生效與 React 互動正常。</p>
        <button
          className="px-4 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 active:scale-95 transition"
          onClick={() => setCount(c => c + 1)}
        >
          點我 +1（{count}）
        </button>
      </main>
    </div>
  )
}

index.css

@import "tailwindcss";

main.jsx

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

這些檔案都有了之後，在終端機輸入

npm run dev

接著打開這個網址，如果有出現這個畫面就是成功啦~